<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--    搜索框-->
    <div class="ok-box-center-right">
      <el-form :inline="true" :model="ok_page" class="user-search">
        <el-form-item label="搜索：">
          <el-input size="small" v-model="ok_page.key" placeholder="请输入用户手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table size="small" :data="pagesData.list" highlight-current-row border element-loading-text="拼命加载中" style="width: 100%;">
        <el-table-column prop="image" label="头像" align="center">
          <template slot-scope="scope">
            <el-image v-if="scope.row.image" :src="ok.tool.getImg(scope.row.image)" style="width: 50px;height: 50px;border-radius: 5px"></el-image>
            <el-image v-else style="width: 50px;height: 50px;border-radius: 5px" :src="require('@/static/images/user1.png')"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="id" >
        </el-table-column>
        <el-table-column prop="nickName" label="昵称" >
        </el-table-column>
        <el-table-column prop="phone" label="手机号" >
        </el-table-column>
        <el-table-column prop="updateTime" label="上次登录时间">
          <template slot-scope="scope">
            {{ok.date.formatDateTime(scope.row.updateTime)}}
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="上次登录时间">
          <template slot-scope="scope">
            {{ok.date.formatDateTime(scope.row.createTime)}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="line-20"></div>
    <!--    分页-->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pagesData.current"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesData.pageSize"
          layout="sizes, prev, pager, next"
          :total="pagesData.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import api from "@/api/manage"
import ok from "@/assets/ok";
import Cookies from "js-cookie";
import pro from "@/api/publicApi"
export default {
  computed: {
    ok() {
      return ok
    }
  },
  data(){
    return{
      loading: false,
      ok_page:{
        key:"",
        pageSize:8,
        current:0,
        status:1,
      },
      pagesData:{
        list:[],
        pageSize:0,
        current:0,
        total:0
      },
      info:{},
    }
  },
  mounted() {
    this.data = this.formData
    this.getPage();
    this.checkLogin();
  },
  methods:{
    checkLogin(){
      if (!ok.tool.getStatus()){
        this.$router.push("/login")
      }
    },
    getPage(){
      api.getUser(this.ok_page).then(res =>{
        this.pagesData = res.result;
      })
    },
    search(){
      this.getPage();
    },

    handleSizeChange(val){
      this.ok_page.pageSize = val;
      this.getPage();
    },
    handleCurrentChange(val){
      this.ok_page.current = val;
      this.getPage()
    },
  }
}
</script>
<style>

</style>
